<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>景点列表</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
	<link rel="stylesheet" href="{{ url('/common/mobile-common/common.css') }}">
	<link rel="stylesheet" href="{{ url('/mobile/css/header.css') }}">
	<link rel="stylesheet" href="{{ url('/mobile/css/scenery/index.css') }}">
	<script src="{{url('mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script src="{{ url('mobile/js/moreLoad/iscroll4.js') }}"></script>
	<script src="{{ url('/common/mobile-common/hmt.js') }}"></script>
	<style>
		body{
			overflow-y: hidden;
		}
		#pullDown, #pullUp {
			background: #fff;
			height: 40px;
			line-height: 40px;
			padding: 5px 10px;
			font-weight: bold;
			font-size: 14px;
			color: #888;
			text-align: center;
		}
		#wrapper{
			bottom: 20px;
		}
		/*::-webkit-scrollbar{
			background: red;
		}*/
	</style>
</head>
<script>
	var myScroll,
			pullDownEl, pullDownOffset,
			pullUpEl, pullUpOffset,
			generatedCount = 0;
	var pp=1,nomore=false;
	function pullDownAction () {
		console.log(1111);
		setTimeout(function () {	
			localStorage.removeItem('indexid');
			var aa=window.location.href;
			if(aa.indexOf('index.html')>0){
				window.location='index.html';
			}else{
				if(aa.indexOf('searche.html')>0){

				}else{
					location.reload();
				}

			}
			myScroll.refresh();	
		}, 1000);
	}

	function loaded() {
		pullDownEl = document.getElementById('pullDown');
		pullDownOffset = pullDownEl.offsetHeight;
		pullUpEl = document.getElementById('pullUp');
		pullUpOffset = pullUpEl.offsetHeight;

		myScroll = new iScroll('wrapper', {
			useTransition: true,
			click:true,
			momentum: true,
			preventDefaultException: { tagName:  /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
			topOffset: pullDownOffset,
			onScrollStart:function(){
				$('#wrapper').trigger('scroll');
			},  
			onRefresh: function () {
				if (pullDownEl.className.match('loading')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新页面';
				} else if (pullUpEl.className.match('loading')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
				}
				$('#wrapper').trigger('scroll');
			},
			onScrollMove: function () {
				if (this.y > 5 && !pullDownEl.className.match('flip')) {
					pullDownEl.className = 'flip';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新页面';
					this.minScrollY = 0;
					setTimeout(function () {	
						localStorage.removeItem('indexid');
						var aa=window.location.href;
						if(aa.indexOf('index.html')>0){
							window.location='index.html';
						}else{

							if(aa.indexOf('searche.html')>0){

							}else{
								location.reload();
							}
						}
						myScroll.refresh();	
					}, 1000);
				} else if (this.y < 5 && pullDownEl.className.match('flip') ) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新页面';
					this.minScrollY = -pullDownOffset;
				} else if (this.y < (this.maxScrollY - 6) && !pullUpEl.className.match('flip') && !nomore) {
					pullUpEl.className = 'flip';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
					this.maxScrollY = this.maxScrollY;
				} else if (this.y > (this.maxScrollY + 6) && pullUpEl.className.match('flip') && !nomore) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
					this.maxScrollY = pullUpOffset;
				}
				$('#wrapper').trigger('scroll');
			},
			onScrollEnd: function () {
				var aa=$('img.lazy:last').attr('data-original');
				$('img.lazy:last').attr('src',aa);
				if (pullDownEl.className.match('flip') && !nomore) {
					pullDownEl.className = 'loading';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新页面';
					pullDownAction();	
				} else if (pullUpEl.className.match('flip') && !nomore) {
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载数据';
					pullUpAction();	
				}

				$('#wrapper').trigger('scroll');
			}
		});

		setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
	}

	document.addEventListener('touches', function (e) { e.preventDefault(); }, false);

	document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
<body>
<div class="abouts">
	<div class="wrap-cont clearfix">
		<div class="tpp">
			<!--header-->
			<header>
				<div class="top">					
					<p><input type="text" name="key" value="{{ $key?$key:'请输入搜索景点'}}"  id="sear-jd">
						<a href="javascript:void(0)" class="sear-icon">
							<img class="sear-icon" src="{{ url('mobile/images/ssuo.png')}}">
						</a>
						
					</p>
				</div>
			</header>
			<input name="rid" type="hidden" value="{{$_GET['id']}}" id="rid">
			<input name="pid" type="hidden" value="{{$_GET['pid']}}" id="pid">
			<input name="type" type="hidden" value="{{$_GET['type']}}" id="type">
			<input name="key1" type="hidden" value="{{$key}}" id="key">
			<input name="page" type="hidden" value="2" id="page">
			<div class="top-menu">
				<ul class="menus clearfix">
					<li class="menuTx">
						<span><img class="zb" src="{{ url('mobile/images/zb.png') }}"></span>
						@if(!empty($pName))
							<em>{{$pName}}</em>
						@else
							<em>全部</em>
						@endif
						<span><img class="tog-icon" src="{{ url('mobile/images/menu-icon.png') }}"></span>
					</li>
					<li  class="menuTx">
						@if(!empty($cName))
							<em>{{$cName}}</em>
						@else
							<em>全部</em>
						@endif
						<span><img class="tog-icon" src="{{ url('mobile/images/menu-icon.png') }}"></span>
					</li>
					<li  class="menuTx">
						@if(!empty($typeName))
							<em>{{$typeName}}</em>
						@else
							<em>全部</em>
						@endif
						<span><img class="tog-icon" src="{{ url('mobile/images/menu-icon.png') }}"></span>
					</li>
				</ul>
			</div>
			<div class="plaec-dz">
				<ul class="areas province">
					<a href="{{ url('wap/scenery?pid=0&id=0&type='.$_GET['type']) }}">
						<li class="qb"><em><img src="{{ url('mobile/images/dg.png') }}" class="dg"></em>全部</li>
					</a>
					@foreach($parent as $v)
					<a href="{{ url('wap/scenery?pid='.$v->id.'&id=0&type='.$_GET['type']) }}">
						<li data-id="{{ $v->id}}">
							<em>
								<img src="{{ url('mobile/images/dg.png') }}" class="dg">
							</em>{{ $v->name}}
						</li>
					</a>
					@endforeach
				</ul>
				<ul class="areas city">
					<a href="{{ url('wap/scenery?pid='.$_GET['pid'].'&id=0&type='.$_GET['type']) }}">
						<li class="qb"><em><img src="{{ url('mobile/images/dg.png') }}" class="dg"></em>全部</li>
					</a>
					@if(!empty($city))
					@foreach($city as $i)
						<a href="{{ url('wap/scenery?pid='.$_GET['pid'].'&id='.$i['id'].'&type='.$_GET['type']) }}">
							<li data-id="{{ $i['id']}}">
								<em>
									<img src="{{ url('mobile/images/dg.png') }}" class="dg">
								</em>{{ $i['name']}}
							</li>
						</a>
					@endforeach
					@endif
				</ul>
				<ul class="areas type">
					<a href="{{ url('wap/scenery?pid='.$_GET['pid'].'&id='.$_GET['id'].'&type=0') }}">
					<li class="qb"><em><img src="{{ url('mobile/images/dg.png') }}" class="dg"></em>全部</li>
					</a>
					@foreach($type as $k=>$v)
						<a href="{{ url('wap/scenery?pid='.$_GET['pid'].'&id='.$_GET['id'].'&type='.$v['id']) }}">
							<li>
								<em>
									<img src="{{ url('mobile/images/dg.png') }}" class="dg">
								</em>{{$v['name']}}
							</li>
						</a>
					@endforeach
				</ul>
			</div>
		</div>
		<div class="bgg"></div>
		<!--end-->
		@if(!empty(count($sel)))
		<div class="article-list" id="wrapper">
    		<div id="scroller" class="scroller">

				<div id="pullDown">
					<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
				</div>
    			<ul class="thelist" id="thelist" style="padding-top: 100px;">
					@include('wap.scenery.list-ajax')
				</ul>
				<div id="pullUp">
					<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
				</div>
			</div>
		</div>

		@else
		<!--无景点-->
		<div class="have-noorder">
			<div class="contt">
				<img src="{{ url('mobile/images/wxgdd.png') }}" class="wxg">
				<p>没有相关的景点</p>
				<p>可以去看看有景点的</p>
			</div>
		</div>
		<!--end-->
		@endif

	</div>
</div>

</body>
<script>


	//上拉事件
	var m = 1;
	function pullUpAction() {
		setTimeout(function () {
			var pid=$('#pid').val();
			var rid=$('#rid').val();
			var type=$('#type').val();
			var key=$('#key').val();
			var page=$('#page').val();
			page=parseInt(page);
			getList(page);

			function getList(page){
				$.get("{{ url('wap/scenery/pullajax') }}",{pid:pid,rid:rid,type:type,key:key,page:page},function(data){
					var more = data.more;
					if(more == 1){
						$('#page').val(page+1);
					}
					if(m!=0&&data.html){
						$('#thelist').append(data.html);
//						var linum=$("#thelist li").length;
//						linum = linum-6;
//						console.log(linum);
//						$("#thelist li").eq(linum).addClass("ww");
//						myScroll.scrollToElement(".ww",100);
						myScroll.refresh();
					}
					if(more == 0){
						$('#pullUp').remove();
						m = 0;
						return false;
					}
				});
			};
		}, 1000);
	}
	$(function(){
		//搜索
		$("header .top p input").on("focus",function(){
			var searJd=$(this).val();
			if(searJd=='' || searJd=="请输入搜索景点"){
				$(this).val("");
			}
			else{
				$(this).val(searJd);
			}
		});
		$("header .top p input").blur(function(){
			var searTxt=$("header .top p input").val();
			if(searTxt==''){
				$(".sear-icon").show();
				$("header .top p input").val("请输入搜索景点");
			}
		});
		//地区选择
		var scrHeighr=$(document.body).height();
		$(".plaec-dz").css("height",scrHeighr);
		$(".top-menu .menus .menuTx").on("click",function(){
			$(".top-menu .menus .menuTx").css("color","#666666");
			$(".plaec-dz .areas li").css("border-bottom","1px solid #E3E3E3");
			$(".plaec-dz .areas li").last().css("border-bottom","0px");
			$(this).css("color","#f63b43");
			$(".bgg").show();
			var TxIndex=$(this).index();
			var Txstatus=$(".plaec-dz .areas").eq(TxIndex).css("display");
			if(Txstatus=='block'){
				$(".plaec-dz .areas").hide();
				$(".plaec-dz").hide();
				$(".bgg").hide();
				$(".plaec-dz .areas").eq(TxIndex).hide();
			}
			else{
				$(".plaec-dz").show();
				$(".bgg").show();
				$(".plaec-dz .areas").hide();
				$(".plaec-dz .areas").eq(TxIndex).show();
			}
		})

		$(".plaec-dz .areas .qb").find("img").show();
		$(".plaec-dz .areas .qb").css("color","#f63b43");
		$(".plaec-dz .areas li").click(function(){
			var liIndex=$(this).parent().parent().index();
			var liText=$(this).text();
			$(".plaec-dz").hide();
			$(this).parent().find("li").css("color","#666666");
			$(this).parent().find(".dg").hide();
			$(this).find(".dg").show();
			$(this).css("color","#f63b43");
			$(".menuTx").eq(liIndex).find("em").text(liText);
			$(".plaec-dz .areas").hide();
			$(".bgg").hide();
		});

		//搜索提交
		
		document.onkeydown=function(event){
			var name = $("[name=key]").val();
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ // enter 键--}}
				window.location.href="scenery?pid={{$_GET['pid']}}&id={{$_GET['id']}}&type={{$_GET['type']}}&key="+name;
			}
		};
		$(".top .sear-icon").one('click',function(){
			var name = $("[name=key]").val();
			window.location.href="scenery?pid={{$_GET['pid']}}&id={{$_GET['id']}}&type={{$_GET['type']}}&key="+name;
		});
		$(".bgg").click(function(){	
			$(".plaec-dz").hide();
			$(".bgg").hide();
		});
		
	});
</script>
<script>
window.onload=function(){
	//资讯列表文字个数限制
		$(".article-ifo .sm-txt").each(function(){
			var txtLegth=$(this).text().length;
			var txtInfo=$(this).text();
			var nowInfo=txtInfo.substr(0, 25);
			if(txtLegth>25){
				nowInfo+='...';
			}
			$(this).text(nowInfo);
		});

}
</script>
</html>